<style lang="less">
    @import '../../../../styles/common.less';

    .ivu-page-options-sizer {
        width: 100px;
    }
</style>

<template>
    <Row>
        <Row class="margin-top-10">
            <Col span="24">
                <Card>

                </Card>

            </Col>
        </Row>
        <Row class="margin-top-10">
            <Col span="24">
                <Card>
                    <p slot="title">项目管理</p>
                    <Row class="margin-bottom-10">
                        <Button type="primary" @click="modalAddDisplay">添加</Button>
                    </Row>

                    <Row class="edittable-table-height-con">
                        <!--<can-edit-table refs="table2" v-model="editInlineData" :columns-list="editInlineColumns"></can-edit-table>-->
                        <Table
                                border :context="self"
                                :columns="table_data.header"
                                :data="table_data.data"
                                @on-sort-change="tableSort"
                        ></Table>
                    </Row>
                    <Row class="margin-top-10">
                        <Page
                                :total="table_data.count"
                                class="float-right"
                                show-total
                                show-sizer
                                show-elevator
                                @on-change="updateTableCurrentPage"
                                @on-page-size-change="updateTablePageLength"
                                :page-size-opts="[10, 25, 50, 100]"
                        ></Page>
                    </Row>

                </Card>
            </Col>
        </Row>

        <Modal
                v-model="modalAdd"
                title="添加操作"
                width="30%"
                :mask-closable="false"
        >

            <Form ref="AddformValidate" :model="modalData.Add.formValidate" :rules="modalData.Add.ruleValidate" :label-width="100">
                <Form-item label="项目名称" prop="name" :error="modalData.Add.formItemError.name">
                    <Input v-model="modalData.Add.formValidate.name" placeholder="请输入项目名称"></Input>
                </Form-item>

                <Form-item label="后端负责人" prop="back_developer">
                    <Select multiple  v-model="modalData.Add.formValidate.back_developer" :error="modalData.Add.formItemError.back_developer" placeholder="请选择后端负责人">
                        <Option v-for="item in userData" :value="item.id" :key="item.id">{{item.username}}</Option>
                    </Select>
                </Form-item>

                <Form-item label="前端负责人" prop="front_developer">
                    <Select multiple  v-model="modalData.Add.formValidate.front_developer" :error="modalData.Add.formItemError.front_developer" placeholder="请选择前端负责人">
                        <Option v-for="item in userData" :value="item.id" :key="item.id">{{item.username}}</Option>
                    </Select>
                </Form-item>

                <Form-item label="开发语言" prop="language_type_id">
                    <Select v-model="modalData.Add.formValidate.language_type_id" :error="modalData.Add.formItemError.language_type_id" placeholder="请选择开发语言">
                        <Option v-for="item in languageTypeData" :value="item.id" :key="item.id">{{item.name}}</Option>
                    </Select>
                </Form-item>

            </Form>

            <div slot="footer">
                <Button @click="modalAdd=false; modalData.Add.loading=false">取消</Button>
                <Button type="primary" :loading="modalData.Add.loading" @click="modalAddFunc">添加</Button>
            </div>

        </Modal>

        <Modal
                v-model="modalUpdate"
                title="修改操作"
                width="30%"
                :mask-closable="false"
        >
            <Form ref="UpdateformValidate" :model="modalData.Update.formValidate" :rules="modalData.Update.ruleValidate" :label-width="100">
                <Form-item label="项目名称" prop="name" :error="modalData.Update.formItemError.name">
                    <Input v-model="modalData.Update.formValidate.name" placeholder="请输入项目名称"></Input>
                </Form-item>

                <Form-item label="后端负责人" prop="back_developer">
                    <Select multiple  v-model="modalData.Update.formValidate.back_developer" :error="modalData.Update.formItemError.back_developer" placeholder="请选择项目负责人">
                        <Option v-for="item in userData" :value="item.id" :key="item.id">{{item.username}}</Option>
                    </Select>
                </Form-item>

                <Form-item label="前端负责人" prop="front_developer">
                    <Select multiple  v-model="modalData.Update.formValidate.front_developer" :error="modalData.Update.formItemError.front_developer" placeholder="请选择开发负责人">
                        <Option v-for="item in userData" :value="item.id" :key="item.id">{{item.username}}</Option>
                    </Select>
                </Form-item>

                <Form-item label="开发语言" prop="language_type_id">
                    <Select v-model="modalData.Update.formValidate.language_type_id" :error="modalData.Update.formItemError.language_type_id" placeholder="请选择开发语言">
                        <Option v-for="item in languageTypeData" :value="item.id" :key="item.id">{{item.name}}</Option>
                    </Select>
                </Form-item>

            </Form>

            <div slot="footer">
                <Button @click="modalUpdate=false">取消</Button>
                <Button type="primary" :loading="modalData.Update.loading" @click="modalUpdateFunc">修改</Button>
            </div>

        </Modal>

    </Row>
</template>

<script>
    import util from '../../../../libs/util';
    import qs from 'qs';

    export default {
        name: 'editable-table',
        data () {
            return {
                test: true,
                modalAdd: false, // 是否显示模态对话框
                modalUpdate: false, // 是否显示模态对话框
                self: this,
                table_data: {
                    header: [
                        {
                            title: '编号',
                            type: 'index',
                            width: 60,
                            align: 'center'
                        },
                        {
                            title: '项目名称',
                            key: 'name',
                            sortable: 'custom'
                        },
                        {
                            title: '前端负责人',
                            key: 'front_developer_list'
                        },
                        {
                            title: '后端负责人',
                            key: 'back_developer_list'
                        },
                        {
                            title: '开发语言',
                            key: 'language_type'
                        },
                        {
                            title: '创建人',
                            key: 'oper_user__username',
                            sortable: 'custom'
                        },
                        {
                            title: '创建时间',
                            key: 'create_date',
                            sortable: 'custom',
                            render: (h, params) => {
                                let createDate = params.row.create_date ? params.row.create_date.replace('T', ' ') : '';
                                return h('span', createDate);
                            }
                        },
                        {
                            title: '操作',
                            key: 'action',
                            width: 200,
                            align: 'center',
                            render: (h, params) => {
                                return [
                                    h('Button', {
                                        props: {
                                            type: 'warning',
                                            size: 'small',
                                            icon: 'edit'
                                        },
                                        on: {
                                            'click': () => {
                                                // 弹出修改模态对话框
                                                console.log('params.row -->', params.row);
                                                this.$refs['UpdateformValidate'].resetFields();
                                                this.modalUpdate = true;
                                                this.modalData.Update.formValidate.name = params.row.name;
                                                this.modalData.Update.formValidate.front_developer = params.row.front_developer_id_list;
                                                this.modalData.Update.formValidate.back_developer = params.row.back_developer_id_list;
                                                this.modalData.Update.formValidate.language_type_id = params.row.language_type_id;
                                                this.modalData.Update.formValidate.id = params.row.id;
                                            }
                                        }
                                    }, '修改'),
                                    h('Poptip', {
                                        props: {
                                            confirm: true,
                                            title: '您确定要删除这条数据吗?',
                                            transfer: true
                                        },
                                        on: {
                                            'on-ok': () => {
                                                let id = params.row.id;
                                                util.ajax.post('api/caseinter_project/delete/' + id).then(res => {
                                                    if (res.data.code === 200) {
                                                        this.modalAdd = false;
                                                        this.$Notice.success({
                                                            title: '删除成功',
                                                            duration: 2
                                                        });
                                                        this.initData();
                                                    } else {
                                                        // 添加失败
                                                        console.log('删除失败 -->', res.data);
                                                        this.$Notice.error({
                                                            title: res.data.msg,
                                                            duration: 5
                                                        });
                                                    }
                                                });
                                            }
                                        }
                                    }, [
                                        h(
                                            'Button',
                                            {
                                                props: {
                                                    type: 'error',
                                                    size: 'small',
                                                    icon: 'trash-b'
                                                },
                                                style: {
                                                    margin: '0 5px'
                                                }
                                            },
                                            '删除'
                                        )]
                                    )
                                ];
                            }
                        }
                    ],
                    data: [],
                    count: 0,
                    length: 10,
                    current_page: 1,
                    order: '-create_date'
                },
                modalData: {
                    Add: {
                        formValidate: {
                            name: '',
                            front_developer: '',
                            language_type_id: '',
                            back_developer: ''
                        },
                        ruleValidate: {
                            name: [
                                { required: true, message: '项目名称不能为空', trigger: 'blur' }
                            ],
                            back_developer: [
                                { required: true, type: 'array', message: '请选择后端负责人', trigger: 'blur' }
                            ],
                            front_developer: [
                                { required: true, type: 'array', message: '请选择前端负责人', trigger: 'blur' }
                            ]
                        },
                        formItemError: {
                            name: '',
                            front_developer: '',
                            language_type_id: '',
                            back_developer: ''
                        },
                        loading: false
                    },
                    Update: {
                        formValidate: {
                            name: '',
                            front_developer: '',
                            language_type_id: '',
                            back_developer: '',
                            id: ''
                        },
                        ruleValidate: {
                            name: [
                                { required: true, message: '项目名称不能为空', trigger: 'blur' }
                            ],
                            back_developer: [
                                { required: true, type: 'array', message: '请选择后端负责人', trigger: 'blur' }
                            ],
                            front_developer: [
                                { required: true, type: 'array', message: '请选择前端负责人', trigger: 'blur' }
                            ]
                        },
                        formItemError: {
                            name: '',
                            front_developer: '',
                            language_type_id: '',
                            back_developer: ''
                        },
                        loading: false
                    }
                },
                userData: [], // 所有用户信息
                languageTypeData: [] // 所有用户信息
            };
        },
        methods: {
            // 初始化获取表格数据
            initData () {
                let params = {
                    'current_page': this.table_data.current_page,
                    'length': this.table_data.length,
                    'order': this.table_data.order,
                    'company_id': localStorage.company_id
                };

                util.ajax.get('api/caseinter_project', {params: params}).then(res => {
                    if (res.data.code === 200) {
                        this.table_data.data = res.data.data.ret_data;
                        this.table_data.count = res.data.data.data_count;
                        this.languageTypeData = res.data.data.language_type;
                    } else {
                        // 登录失败
                        console.log('获取内容异常');
                    }
                });
            },

            // 弹出增加对话框
            modalAddDisplay () {
                this.modalAdd = true;
                this.$refs['AddformValidate'].resetFields();
                console.log('this.roleData -->', this.roleData);
            },

            // 增加
            modalAddFunc () {
                this.modalData.Add.loading = true;

                // 初始化所有字段错误信息的值
                for (let key in this.modalData.Add.formItemError) {
                    this.modalData.Add.formItemError[key] = '';
                }

                this.$refs['AddformValidate'].validate((valid) => {
                    if (valid) {
                        let params = {
                            'name': this.modalData.Add.formValidate.name,
                            'front_developer': JSON.stringify(this.modalData.Add.formValidate.front_developer),
                            'back_developer': JSON.stringify(this.modalData.Add.formValidate.back_developer),
                            'language_type': this.modalData.Add.formValidate.language_type_id
                            // 'company_id': localStorage.company_id
                        };

                        util.ajax.post('api/caseinter_project/add/0', qs.stringify(params)).then(res => {
                            if (res.data.code === 200) {
                                this.modalAdd = false;
                                this.$Notice.success({
                                    title: '添加成功',
                                    duration: 2
                                });
                                this.initData();
                            } else {
                                // 添加失败
                                for (let key in res.data.msg) {
                                    this.modalData.Add.formItemError[key] = res.data.msg[key][0].message;
                                }
                            }
                            this.modalData.Add.loading = false;
                        });
                    } else {
                        this.modalData.Add.loading = false;
                    }
                });
            },

            // 修改
            modalUpdateFunc () {
                this.modalData.Update.loading = true;

                console.log('Update.loading -->', this.modalData.Update.loading);

                // 初始化所有字段错误信息的值
                for (let key in this.modalData.Update.formItemError) {
                    this.modalData.Update.formItemError[key] = '';
                }

                this.$refs['UpdateformValidate'].validate((valid) => {
                    if (valid) {
                        let params = {
                            'name': this.modalData.Update.formValidate.name,
                            'front_developer': JSON.stringify(this.modalData.Update.formValidate.front_developer),
                            'back_developer': JSON.stringify(this.modalData.Update.formValidate.back_developer),
                            'language_type': this.modalData.Update.formValidate.language_type_id
                        };

                        util.ajax.post('api/caseinter_project/update/' + this.modalData.Update.formValidate.id, qs.stringify(params)).then(res => {
                            if (res.data.code === 200) {
                                console.log('修改成功 -->', res.data);
                                this.modalUpdate = false;
                                this.$Notice.success({
                                    title: '修改成功',
                                    duration: 2
                                });
                                this.initData();
                            } else {
                                // 修改失败
                                for (let key in res.data.msg) {
                                    this.modalData.Update.formItemError[key] = res.data.msg[key][0].message;
                                }
                            }

                            this.modalData.Update.loading = false;
                        });
                    } else {
                        // this.$Message.error('表单验证失败!');
                        this.modalData.Update.loading = false;
                    }
                });
            },

            // 当页码被改变是触发
            updateTableCurrentPage (currentPage) {
                this.table_data.current_page = currentPage;
                this.initData();
            },

            // 修改每页显示数量
            updateTablePageLength (length) {
                this.table_data.length = length;
                this.initData();
            },

            // 表格排序触发
            tableSort (e) {
                let key = e.key;
                let order = e.order;

                if (order === 'desc') {
                    this.table_data.order = '-' + key;
                } else {
                    this.table_data.order = key;
                }
                this.initData();
            },

            // 获取所有用户信息
            getUserData () {
                let params = {
                    'current_page': this.table_data.current_page,
                    'length': 0,
                    'order': 'create_date',
                    'company_id': localStorage.company_id
                };

                util.ajax.get('api/user', {params: params}).then(res => {
                    if (res.data.code === 200) {
                        this.userData = res.data.data.ret_data;
                    } else {
                        // 登录失败
                        console.log('获取内容异常');
                    }
                });
            }
        },
        created () {
            this.initData();
            this.getUserData();
        }
    };
</script>
